<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
<!--头部-->
        <tree-tool :tree-node="company"  :is-root="true"  @addInfo="addInfo" class="head"></tree-tool>
<!--树形-->
        <el-tree :data="organization" :props="defaultProps" default-expand-all>

          <!-- 说明el-tree里面的这个内容 就是插槽内容 => 填坑内容  => 有多少个节点循环多少次 -->
          <!-- scope-scope 是 tree组件传给每个节点的插槽的内容的数据 -->
          <!-- 顺序一定是 执行slot-scope的赋值 才去执行 props的传值 -->
          <tree-tool slot-scope="{ data }" :tree-node="data" @addInfo="addInfo"  @edit="editInfo" @removeOrganization="getOrganization" />


        </el-tree>

      </el-card>
    </div>

<!--    放置弹窗-->
<add-tool ref="add" :show-dialog.sync="showDialog" :tree-node="node"  @addSucess="getOrganization"></add-tool>
  </div>
</template>

<script>
import  treeTool from './components/tree-tools'
import  addTool from './components/add'
import  {getOrganization} from "@/api/organization";
import {tranListToTreeData} from '@/utils/index'

export default {
  name:'organization',
  data(){
  return{

    defaultProps: {
      label: 'name',
      children:'children'
    },
    organization:[], //接收的组织架构数据

    company: { name: '物联网俱乐部人员管理系统', manager: '负责人',id:0},
    showDialog: false, //默认不显示弹窗
    node:null, //记录点击哪个

  }
},
  components:{//注册组件
    treeTool,
    addTool

  },
  created() {

  this.getOrganization()
  },
  methods:{
      //获取组织架构数据
   async getOrganization(){
     const result= await  getOrganization()
     this.organization=tranListToTreeData(result,0)



    },


    //添加部门
    addInfo(node){
     this.showDialog=true
    this.node=node
    },

    //编辑部门信息
    editInfo(node){
      this.showDialog=true
      this.node=node
      this.$refs.add.formatDateBackWrite(node)

    }
  }
}
</script>

<style scoped>
.head{
  margin-bottom: 20px;
  font-size: large;

}

</style>
